
//人口密度 ,房屋价格  与辖区的关系

function echarts_8(data1, data2) {


    // 基于准备好的dom，初始化echarts实例
    var myChart = echarts.init(document.getElementById('echart8'));


    //------数据处理--------
    var region = new Set(); //辖区表

    for (var i = 0; i < data1.length; i++) {//初始化
        region.add(data1[i].region)

    }
    data_1 = []
    for (var i = 0; i < data1.length; i++)
        data_1[i] = data1[i].households_total
    data_2 = []
    for (var i = 0; i < data2.length; i++)
        data_2[i] = data2[i].price

    region = Array.from(region);//转化为数组


    //-------------------------渲染-------------


    option = {
        color: ['#80FFA5', '#00DDFF', '#37A2FF', '#FF0087', '#FFBF00'],
        title: {
            // text: '人口密度与住房价格对比',
            textStyle: {
                color: '#fff'
            }
        },
        tooltip: {
            trigger: 'axis',
            axisPointer: {
                type: 'cross',
                label: {
                    backgroundColor: '#6a7985'
                }
            }

        },
        legend: {
            data: ['人口密度', '房屋价格'],
            textStyle: {
                color: '#fff', // 文字的颜色。
            }

        },
        toolbox: {
            feature: {
                saveAsImage: {}
            }
        },
        grid: {
            left: '3%',
            right: '4%',
            bottom: '3%',
            containLabel: true
        },
        xAxis: [
            {
                type: 'category',
                boundaryGap: false,
                data: region,
                axisLabel: {
                    show: true,
                    textStyle: {
                        color: '#fff'
                    }
                }
            }
        ],
        yAxis: [
            {
                type: 'value',
                axisLabel: {
                    formatter: '{value}',
                    textStyle: {
                        color: '#fff'
                    }
                }
            }

        ],
        series: [
            {
                name: '人口密度',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255, 191, 0)'
                    }, {
                        offset: 1,
                        color: 'rgba(224, 62, 76)'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                data: data_1
            },
            {
                name: '房屋价格',
                type: 'line',
                stack: '总量',
                smooth: true,
                lineStyle: {
                    width: 0
                },
                showSymbol: false,
                areaStyle: {
                    opacity: 0.8,
                    color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                        offset: 0,
                        color: 'rgba(255, 0, 135)'
                    }, {
                        offset: 1,
                        color: 'rgba(135, 0, 157)'
                    }])
                },
                emphasis: {
                    focus: 'series'
                },
                data: data_2
            }
        ]
    };


    // 使用刚指定的配置项和数据显示图表。
    myChart.setOption(option);
    window.addEventListener("resize", function () {
        myChart.resize();
    });


}